  <template>
      <div class="edit-popup">
          <popup
              ref="popupRef"
              :title="popupTitle"
              :async="true"
              width="75%"
              :clickModalClose="true"
              @confirm="handleSubmit"
              @close="handleClose"
          >
              <el-form
                  ref="formRef"
                  :model="formData"
                  label-width="200px"
                  :rules="formRules"
                  :inline="true"
                  class="addlinkformRef"
              >
                  <el-form-item label="联系人编号" prop="id">
                      <el-input
                          v-model="formData.id"
                          placeholder="系统自动生成"
                          disabled="disabled"
                      />
                  </el-form-item>
                  <el-form-item label="联系人名称" prop="name">
                      <el-input v-model="formData.name" placeholder="请输入联系人名称" />
                  </el-form-item>
                  <el-form-item label="工作邮箱" prop="workEmail">
                      <el-input v-model="formData.workEmail" placeholder="请输入工作邮箱" />
                  </el-form-item>
                  <el-form-item label="职位" prop="position">
                      <el-input v-model="formData.position" placeholder="请输入职位" />
                  </el-form-item>
                  <el-form-item label="私人邮箱" prop="email">
                      <el-input v-model="formData.email" placeholder="请输入私人邮箱" />
                  </el-form-item>
                  <el-form-item label="是否在职" prop="isOnJob">
                      <el-input v-model="formData.isOnJob" placeholder="请输入是否在职" />
                  </el-form-item>
                  <el-form-item label="称呼" prop="callName">
                      <el-select class="flex-1" v-model="formData.callName" placeholder="请输入称呼">
                          <el-option label="无" value="0" />
                          <el-option label="博士" value="1" />
                          <el-option label="小姐" value="2" />
                          <el-option label="教授" value="3" />
                          <el-option label="先生" value="4" />
                          <el-option label="女士" value="5" />
                          <el-option label="经理" value="6" />
                          <el-option label="总经理" value="7" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                      <el-select class="flex-1" v-model="formData.sex" placeholder="请选择性别">
                          <el-option label="女" value="0" />
                          <el-option label="男" value="1" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="联系人类别" prop="type">
                      <el-select
                          class="flex-1"
                          v-model="formData.type"
                          placeholder="请选择联系人类别"
                      >
                          <el-option label="IPR" value="0" />
                          <el-option label="流程人员" value="1" />
                          <el-option label="技术联系人" value="2" />
                          <el-option label="财务人员" value="3" />
                          <el-option label="公司负责人" value="4" />
                          <el-option label="发明人" value="5" />
                          <el-option label="来文通知人员" value="6" />
                          <el-option label="商标联系人" value="7" />
                          <el-option label="其他" value="8" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label=" 座机" prop="number">
                      <el-input v-model="formData.number" placeholder="请输入 座机" />
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                      <el-input v-model="formData.phone" placeholder="请输入电话" />
                  </el-form-item>
                  <el-form-item label="传真" prop="fax">
                      <el-input v-model="formData.fax" placeholder="请输入传真" />
                  </el-form-item>
                  <el-form-item label="qq" prop="qq">
                      <el-input v-model="formData.qq" placeholder="请输入qq" />
                  </el-form-item>
                  <el-form-item label="微信号" prop="wechat">
                      <el-input v-model="formData.wechat" placeholder="请输入微信号" />
                  </el-form-item>
                  <el-form-item label="排序" prop="sort">
                      <el-input v-model="formData.sort" placeholder="请输入排序" />
                  </el-form-item>
                  <el-form-item label="工作地址" prop="workAddress">
                      <el-input v-model="formData.workAddress" placeholder="请输入工作地址" />
                  </el-form-item>
                  <el-form-item label="历史地址" prop="oldAddress">
                      <el-input v-model="formData.oldAddress" placeholder="请输入历史地址" />
                  </el-form-item>
                  <el-form-item label="家庭地址" prop="homeAddress">
                      <el-input v-model="formData.homeAddress" placeholder="请输入家庭地址" />
                  </el-form-item>
                  <el-form-item label="邮编" prop="postcode">
                      <el-input v-model="formData.postcode" placeholder="请输入邮编" />
                  </el-form-item>
                  <el-form-item label="兴趣爱好" prop="hobby">
                      <el-input v-model="formData.hobby" placeholder="请输入兴趣爱好" />
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                      <el-input v-model="formData.remark" placeholder="请输入备注" />
                  </el-form-item>
              </el-form>
          </popup>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import { linkmanEdit, linkmanAdd, linkmanDetail } from '@/api/linkman'
  import Popup from '@/components/popup/index.vue'
  import feedback from '@/utils/feedback'
  import type { PropType } from 'vue'
  defineProps({
      dictData: {
          type: Object as PropType<Record<string, any[]>>,
          default: () => ({})
      }
  })
  const emit = defineEmits(['success', 'close'])
  const formRef = shallowRef<FormInstance>()
  const popupRef = shallowRef<InstanceType<typeof Popup>>()
  const mode = ref('add')
  const popupTitle = computed(() => {
      return mode.value == 'edit' ? '编辑线索联系人' : '新增线索联系人'
  })

  const route = useRoute()
  const router = useRouter()
  const formData = reactive({
      id: '',
      name: '',
      workEmail: '',
      position: '',
      threadId: route.query.id,
      email: '',
      isOnJob: '',
      callName: '',
      sex: '',
      type: '',
      systemType: '1',
      number: '',
      phone: '',
      fax: '',
      qq: '',
      wechat: '',
      sort: '',
      workAddress: '',
      oldAddress: '',
      homeAddress: '',
      postcode: '',
      hobby: '',
      remark: ''
  })

  const formRules = {
      name: [
          {
              required: true,
              message: '请输入联系人名称',
              trigger: ['blur']
          }
      ]
  }

  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      mode.value == 'edit' ? await linkmanEdit(data) : await linkmanAdd(data)
      popupRef.value?.close()
      feedback.msgSuccess('操作成功')
      emit('success')
  }

  const open = (type = 'add') => {
      mode.value = type
      popupRef.value?.open()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async (row: Record<string, any>) => {
      const data = await linkmanDetail({
          id: row.id
      })
      setFormData(data)
  }

  const handleClose = () => {
      emit('close')
  }

  defineExpose({
      open,
      setFormData,
      getDetail
  })
  </script>
  <style scoped>
  .addlinkformRef .el-form-item {
      width: 500px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }
  ::v-deep .el-collapse-item__wrap {
      padding-top: 40px;
  }
  </style>
